<template>
	<div class="content-wrap">
		<div class="content-top-box">
			<!-- 搜索区域 -->
			<ul class="search-container">
				<li>
					<span class="search-item-name">手机号：</span>
					<el-input class="search-item-content search-item-text" placeholder="请输入手机号" v-model="phone" clearable maxlength="11" @clear="clearPhoneFn">
					</el-input>
				</li>
				<li>
					<span class="search-item-name">姓名：</span>
					<el-input class="search-item-content search-item-text" placeholder="请输入姓名" v-model="userName" clearable @clear="clearUserName">
					</el-input>
				</li>
				<li>
					<span class="search-item-name">流水时间：</span>
					<el-date-picker v-model="date" type="daterange" range-separator="至" start-placeholder="开始时间" end-placeholder="结束时间" value-format="yyyy-MM-dd HH:mm:ss" @change="changeDate">
					</el-date-picker>
				</li>
				<li>
					<span class="search-item-name">类型：</span>
					<el-select class="search-item-content" v-model="actCode" placeholder="请选择" clearable @change="changeFlowType">
						<el-option v-for="item in flowTypeOptions" :key="item.value" :label="item.label" :value="item.value">
						</el-option>
					</el-select>
				</li>
				<li>
					<el-button class="search-btn" type="primary" icon="el-icon-search" @click="searchFn" v-if="searchBtn">查询</el-button>
					<download-excel class="export-excel-wrapper" :data="jsonData" :fields="jsonFields" name="账户余额流水表.xls" v-if="exportBtn">
						<el-button class="search-btn" type="primary" icon="el-icon-download">导出</el-button>
					</download-excel>
				</li>
			</ul>
		</div>

		<div class="content-bottom-box">
			<!-- 表格 -->
			<div class="content-form-box">
				<el-table v-loading="loadingFlag" :data="tableData" :height="tableHeight" ref="table" border stripe style="width: 100%">
					<el-table-column prop="serialNumbers" label="序号" width="60" :show-overflow-tooltip="true" fixed>
					</el-table-column>
					<el-table-column prop="userName" label="姓名" width="160" fixed>
					</el-table-column>
					<el-table-column prop="actTime" label="流水时间">
					</el-table-column>
					<el-table-column prop="phone" label="手机号" :show-overflow-tooltip="true" width="120">
					</el-table-column>
					<el-table-column prop="actCode" label="类型" width="160">
						<template slot-scope="scope">
							<span>
		                    	{{scope.row.actCode == '1' ? '采购支出': '' 
								 || scope.row.actCode == '2' ? '求购支出': '' 
								 || scope.row.actCode == '3' ? '供货收入 ': ''
								 || scope.row.actCode == '4' ? '转售收入 ': ''
								 || scope.row.actCode == '5' ? '采购黑木耳支出 ': ''
								 || scope.row.actCode == '6' ? '提现 ': ''
								}}
		                    </span>
						</template>
					</el-table-column>
					<el-table-column prop="actMoney" label="金额(元)" width="160" :show-overflow-tooltip="true">
					</el-table-column>
					<el-table-column prop="accountMoney" label="账户余额(元)" width="160" :show-overflow-tooltip="true">
					</el-table-column>
					<el-table-column prop="txIng" label="提现状态" :show-overflow-tooltip="true" width="160">
					</el-table-column>
					<el-table-column prop="actRefNo" label="流水号" width="180">
					</el-table-column>
				</el-table>
			</div>

			<!-- 页码 -->
			<div class="content-Page-container">
				<BaseFormPage :pagination="pagination" @cFirstPageFn="cFirstPageFn" @cLastPageFn="cLastPageFn" @cJumpPageFn="cJumpPageFn" @cPreFn="cPreFn" @cNextFn="cNextFn" @cRefreshFn="cRefreshFn">
				</BaseFormPage>
			</div>
		</div>
	</div>
</template>

<script>
	import Storage from "@/utils/storage";
	import BaseFormPage from '@/components/BaseFormPage';
	export default {
		components: {
			BaseFormPage
		},
		data() {
			return {
				jsonFields: {
					"序号": "index",
					"姓名": "userName", 
					"流水时间": "actTime",
					"手机号": "phone",
					"类型": "actCode",
					"金额(元)": "actMoney",
					"账户余额(元)": "accountMoney",
					"提现中": "txIng",
					"流水号": "actRefNo"
				},
				loadingFlag: false, //表格数据加载状态
				dialogFlag: false, //弹窗显示状态
				phone: '',
				userName: '',
				date: '',
				startCreateTime: '',
				endCreateTime: '',
				actRefNo: '',  //交易流水号
				actCode: '',   // 	交易流水类型
				flowTypeOptions: [{
						value: '6',
						label: '提现'
					},
					{
						value: '3',
						label: '供货收入'
					},
					{
						value: '4',
						label: '转售收入'
					},
					{
						value: '1',
						label: '采购支出'
					},
					{
						value: '2',
						label: '求购支出'
					},
					{
						value: '5',
						label: '采购黑木耳支出'
					}
				],

				pageIndex: 1,
				pageSize: 20,
				tableHeight: 200, //表格初始高度
				tableData: [], //表格数据
				pagination: { //分页数据
					loadingFlag: false, //数据加载状态
					currentPage: 1, //当前页
					totalPage: 1, //总页数
					totalNum: 0, //总条数
					firstNum: 0, //分页显示起始值
					endNum: 0 //分页显示结束值
				},

				jsonData: [],
				
				jsonMeta: [
					[{
						"key": "charset",
						"value": "utf-8"
					}]
				],

				searchBtn: (JSON.parse(Storage.get('roleAuthIdArr'))).indexOf(248) == -1 ? false : true,
				exportBtn: (JSON.parse(Storage.get('roleAuthIdArr'))).indexOf(249) == -1 ? false : true,
			}
		},
		created() {
			if(this.$route.query.userName){  // 核对
				this.userName = this.$route.query.userName;
				this.getListData() 
			} else {
				this.getListData() 
			}
		},
		methods: {
			getListData(){    // 审核列表
				this.loadingFlag = true;
				this.pagination.loadingFlag = true;
				let params = {
					phone: this.phone,
					userName: this.userName,
					actRefNo: this.actRefNo,
					actCode: this.actCode,
					startCreateTime: this.startCreateTime,
					endCreateTime: this.endCreateTime,
					pgCt: this.pageIndex,
					pgSz: this.pageSize
				}
				if(!this.phone) {
					delete params.phone
				}
				if(!this.userName) {
					delete params.userName
				}
				if(!this.actRefNo) {
					delete params.actRefNo
				}
				if(!this.actCode) {
					delete params.actCode
				}
				if(!this.startCreateTime) {
					delete params.startCreateTime
				}
				if(!this.endCreateTime) {
					delete params.endCreateTime
				}
				this.$http.get('/finance/listTrading', params)
				.then((res)=>{
					console.log(res.data.records)
					if(res.data.records.length > 0) {
							this.pagination.totalPage = res.data.pages;
							this.pagination.totalNum = res.data.total;
							res.data.records.forEach((item, index) => {
								if(item.actCategory == 1){
									item.actMoney = '-' + item.actMoney
								}
								if(item.txIng == 1){
									item.txIng = '提现中'
								} else if(item.txIng == 2){
									item.txIng = '提现失败'
								} else if(item.txIng == 3){
									item.txIng = '提现成功'
								}
								//列表下标
								item.index = index
								//列表序号
								item.serialNumbers = ((this.pageIndex - 1) * this.pageSize) + (index + 1)
								//无数据处理
//								item.remarks = item.remarks || '--'
//								item.auditTime = item.auditTime || '--'
//								item.completeTime = item.completeTime || '--'
							})
							this.pagination.firstNum = res.data.records[0].serialNumbers
							this.pagination.endNum = res.data.records[res.data.records.length - 1].serialNumbers
						} else {
							this.pagination.currentPage = 1
							this.pagination.totalPage = 1
							this.pagination.totalNum = 0
							this.pagination.firstNum = 0
							this.pagination.endNum = 0
						}
						this.tableData = res.data.records;
				})
				.then(() => {
						if(this.tableData.length !== 0) {
							this.tableHeightFn();
						}
						this.loadingFlag = false;
						this.pagination.loadingFlag = false;
						this.getAllListData()
					})
			},
			tableHeightFn() { //表格高度
				let tableDataLength = this.tableData.length;
				let minHeight = tableDataLength == 0 ? 0 : 80;
				this.$nextTick(function() {
					this.tableHeight = window.innerHeight - this.$refs.table.$el.offsetTop - minHeight;
					if(this.tableData.length <= 0) {
						this.tableHeight = '60vh'
					}

					let self = this;
					window.onresize = function() {
						self.tableHeight = window.innerHeight - self.$refs.table.$el.offsetTop - minHeight;
						self.tableHeight = self.tableHeight < 200 ? 200 : self.tableHeight;
					}
				})
			},
			resetPageIndex() { //重置页码
				this.pagination.currentPage = 1;
				this.pageIndex = 1;
			},
			clearPhoneFn() { //清空手机号
				this.resetPageIndex()
				this.getListData()
			},
			clearUserName() { //清空姓名
				this.resetPageIndex()
				this.getListData()
			},
			changeDate() { //选择时间
				if(this.date) {
					this.startCreateTime = this.date[0]
					this.endCreateTime = this.date[1].replace('00:00:00', '23:59:59')
				} else {
					this.startCreateTime = ''
					this.endCreateTime = ''
				}
				this.resetPageIndex()
				this.getListData()
			},
			changeFlowType() { //选择状态
				this.resetPageIndex()
				this.getListData()
			},
			searchFn() { //搜索
				this.resetPageIndex()
				this.getListData()
			},
			checkUserInfoFn(index) { //查看详情
				this.dialogFlag = true;
				this.detailData = this.tableData[index]
			},
			cFirstPageFn(pageNum) { //首页
				this.pageIndex = pageNum;
				this.getListData()
			},
			cLastPageFn(pageNum) { //尾页
				this.pageIndex = pageNum;
				this.getListData()
			},
			cJumpPageFn(pageNum) { //页码跳转
				this.pageIndex = pageNum;
				this.getListData()
			},
			cPreFn(pageNum) { //上一页
				this.pageIndex = pageNum;
				this.getListData()
			},
			cNextFn(pageNum) { //下一页
				this.pageIndex = pageNum;
				this.getListData()
			},
			resetParams() { //重置参数
				this.phone = ''
				this.userName = ''
				this.date = ''
				this.startCreateTime = ''
				this.endCreateTime = ''
				this.flowType = ''
				this.detailData = {}
				this.tableData = []
				this.pageIndex = 1
				this.pageSize = 20
				this.pagination = {
					loadingFlag: false,
					currentPage: 1,
					totalPage: 1,
					totalNum: 0,
					firstNum: 0,
					endNum: 0
				}
			},
			cRefreshFn() { //刷新
				this.resetParams()
				this.getListData()
			},
			getAllListData(){    // 审核列表
				let params = {
					phone: this.phone,
					userName: this.userName,
					actRefNo: this.actRefNo,
					actCode: this.actCode,
					startCreateTime: this.startCreateTime,
					endCreateTime: this.endCreateTime,
					pgCt: 1,
					pgSz: 99999
				}
				if(!this.phone) {
					delete params.phone
				}
				if(!this.userName) {
					delete params.userName
				}
				if(!this.actRefNo) {
					delete params.actRefNo
				}
				if(!this.actCode) {
					delete params.actCode
				}
				if(!this.startCreateTime) {
					delete params.startCreateTime
				}
				if(!this.endCreateTime) {
					delete params.endCreateTime
				}
				this.$http.get('/finance/listTrading', params)
				.then((res)=>{
					console.log(res.data.records)
					if(res.data.records.length > 0) {
							res.data.records.forEach((item, index) => {
								// 1:支出 2：收入 ,
								if(item.actCategory == 1){
									item.actMoney = '-' + item.actMoney
								}
								if(item.actCode == 1){
									item.actCode = '采购支出'
								} else if(item.actCode == 2){
									item.actCode = '求购支出'
								} else if(item.actCode == 3){
									item.actCode = '供货收入'
								} else if(item.actCode == 4){
									item.actCode = '转售收入'
								} else if(item.actCode == 5){
									item.actCode = '采购黑木耳支出'
								} else if(item.actCode == 6){
									item.actCode = '提现'
								}
								//列表下标
								item.index = index + 1

							})
						}
						this.jsonData = res.data.records;
				})
			},
		}
	}
</script>

<style lang="scss" scoped>

</style>